<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Expander</title>

<style type="text/css">
.highlight
{
	font-weight: bold;
	cursor: pointer;
}
</style>

<script type="text/javascript">
function initLogs()
{
	jgrouse.log.addHandler(new jgrouse.logHandlers.ConsoleLog());
}

jgrouse_config = 
{
	initLogs : initLogs,
	logLevel : 'INFO',
	nologs : true,
	debug : true
}
</script>


<script type="text/javascript" src='../src/jgrouse.js'></script>
<script type="text/javascript" src='../src/log.js'></script>
<script type="text/javascript" src='../src/classloader.js'></script>

<script type="text/javascript">

function initApp()
{
	var item = document.getElementById('appContainer');
	//container = new testContainer.View();
	if (!window.origTemplate)
	{
		origTemplate = item.innerHTML;
	}
	
	var tp = new jgrouse.widgets.TemplateParser(origTemplate);
	tp.doParse();
	container = tp.getMembers().get('main');
	var controller = new jgrouse.util.BaseController();
	container.bind(new jgrouse.util.MvcDriver(controller));
	
	container.setData({"root/header2":true, "root":true});
	item.innerHTML = '';
	container.add(item);
}
</script>


</head>
<body>
	<div id='appContainer'>
		<div _jgtype="container" _controller-class='jgrouse.widgets.ExpanderController' _jgmember="main" >
			<div class="menu" _jgtype="expander" _bindings='value:root'>
				<div class="header" _jgtype="staticText" _bindings='triggerClick:triggerNodeToggle' 
					_click-value='root' $rollover="rollover" $rollover.class-name="highlight">header</div>
				<div class="content" _jgmember='_block'>
					bla
					<div class="menu"  _jgtype="expander" _bindings="value:root/header1">
						<div class="header" _jgtype="staticText" _bindings='triggerClick:triggerNodeToggle' 
						_click-value='root/header1' $rollover="rollover" $rollover.class-name="highlight">header1</div>
						<div class="content" style="border : black solid thin; padding: 3px" _jgmember='_block'>
							<div>blabla item 1</div>
							<div>blabla item 2</div>
						</div>
					</div>
					<div class="menu" _jgtype="expander" _bindings="value:root/header2">
						<div class="header" _jgtype="staticText" _bindings='triggerClick:triggerNodeToggle' _click-value='root/header2'
						$rollover="rollover" $rollover.class-name="highlight">header2</div>
						<div class="content" style="border : black solid thin; padding: 3px" _jgmember="_block">
							<div>blabla item 3</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	jgrouse.require(['jgrouse.widgets.Expander', 'jgrouse.widgets.StaticText', 'jgrouse.widgets.spices.Spices'], function()
	{
		initApp();
	});
</script>
</html>
